<script>
export default {
  name: "BaseProgress",
  props: {
    width: {
      type: Number,//限制props的类型
      required: true,//限制必填项
      default: 10,//限制默认值
      validator(value) { // 自定义校验
        if (value <= 100) {
          return true //校验通过
        } else {
          return false //校验不通过
        }
      }
    }
  },
  methods: {
    add() {
      this.$emit("add")
    },
    sub() {
      this.$emit("sub")
    }
  }
}
</script>
<template>
  <section class="BaseProgress" :style="{width: width+'%'}">
    <h1>{{ width }}%</h1>
    <button @click="sub">-</button>
    <button @click="add">+</button>
  </section>
</template>
<style scoped lang="less">
section {
  margin-top: 10px;
  background-color: #46fa17;
  transition: all 1s;
}
</style>